<template>
  <div class="container">
    <div style="text-align:center;">
      <h3>课程添加</h3>
    </div>
    <hr />
    <table>
      <tr>
        <td align="right">
          <span>课程名称：</span>
        </td>
        <td>
          <el-input v-model="lessonSchedule.course_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>开课学院：</span>
        </td>
        <td>
          <el-input v-model="lessonSchedule.institute_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>教学班级：</span>
        </td>
        <td>
          <el-input v-model="lessonSchedule.class_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>排课人数：</span>
        </td>
        <td>
          <el-input style="width: 150px" v-model="lessonSchedule.arrangeNumber"></el-input>
          <span>上课人数：</span>
          <el-input style="width: 150px" v-model="lessonSchedule.attendanceNumber"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>授课教师：</span>
        </td>
        <td>
          <el-input v-model="lessonSchedule.teacher_name"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>授课地点：</span>
        </td>
        <td>
          <el-input v-model="lessonSchedule.place"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>上课星期：</span>
        </td>
        <td align="left">
          <el-input style="width: 150px" v-model="lessonSchedule.week"></el-input>
          <span>上课节次：</span>
          <el-input style="width: 150px" v-model="lessonSchedule.sectionTime"></el-input>
          <span>课时：</span>
          <el-input style="width: 150px" v-model="lessonSchedule.classPeriod"></el-input>
        </td>
      </tr>
      <tr>
        <td align="right">
          <span>课程描述：</span>
        </td>
        <td>
          <el-input type="textarea" size="medium" v-model="lessonSchedule.description"></el-input>
        </td>
      </tr>
      <tr></tr>
      <tr>
        <td></td>
        <td>
          <el-button type="primary" @click="add_lessonSchedule">确认</el-button>
          <el-button type="primary">还原</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "Update",
  data() {
    return {
      lessonSchedule: {
        term_name: "", //学期
        course_id: "", //课程编号
        course_name: "", //课程名称
        institute_name: "", //开课学院
        class_name: "", //教学班名称
        arrangeNumber: 0, //排课人数
        attendanceNumber: 0, //上课人数
        teacher_name: "", //授课教师
        place: "", //上课地点
        week: "", //星期几上课
        sectionTime: "", //第几节
        classPeriod: 0, //课时
        description: "" //授课内容简介
      }
    };
  },
  methods: {
    //返回
    back() {
      this.$emit("showAdd", false);
    },
    //添加课程信息
    add_lessonSchedule() {
      this.$alert("添加课程", "添加成功", {
        confirmButtonText: "确定",
        callback: action => {
          //添加成功，返回页面
          this.$emit("showAdd", false);
        }
      });
    }
  }
};
</script>

<style scoped>
h3 {
  font-weight: 500;
}
p {
  float: right;
  font-weight: 300;
}
span {
  font-weight: 300;
}
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
tr {
  padding: 10px;
  height: 50px;
  line-height: 50px;
}
</style>
